<template>
  <div class="body">
    <div class="loginBox">
      <span class="loginTitle">伯图全景</span>
      <span class="loginText">医生系统</span>

      <el-form :model="loginInfo" :rules="rules" ref="MedicalRecordInfo" label-width="0px">
        <el-form-item prop="phone">
          <el-input
            class="inputBox"
            v-model="loginInfo.phone"
            placeholder="请输入手机号"
            maxlength="11"
            :autofocus="true"
          ></el-input>
        </el-form-item>
        <el-form-item prop="code" class="codeInput">
          <el-input class="inputBox" v-model="loginInfo.code" placeholder="请输入验证码" maxlength="6"></el-input>
          <div class="getCode" @click="getCode" v-show="time == 60">获取验证码</div>
          <div class="getCode getCode2" v-show="time !== 60">
            获取验证码
            <span>( {{time}}s )</span>
          </div>
        </el-form-item>
      </el-form>
      <div class="loginBtn" @click="login">登录</div>
    </div>
  </div>
</template>

<script>
import { toLogin, getPhoneCode } from "../requestApi/login";
export default {
  data() {
    var checkPhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else if (
        /^(13[0-9]|15[0-3]|15[5-9]|17[0-8]|18[0-9]|19[8-9])\d{8}$/.test(value)
      ) {
        callback();
      } else {
        callback(new Error("请输入正确的手机号"));
      }
    };
    var checkCode = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else {
        callback();
      }
    };
    return {
      loginInfo: {
        // phone: "13677777777", 
        phone: "", 
        code: ""      },
      rules: {
        phone: [{ validator: checkPhone, trigger: "blur" }],
        code: [{ validator: checkCode, trigger: "blur" }]
      },
      time: 60,
      timeNum: null //定时器
    };
  },
  created: function() {
    if (this.$route.query.type == "out") {
      this.$message({
        type: "error",
        message: "当前账号已在别处登录"
      });
    }
  },
  methods: {
    // 登录
    login() {
      let self = this;
      if (self.loginInfo.phone.length==11 && self.loginInfo.code) {
        let response = toLogin({
          account: self.loginInfo.phone,
          verifyCode: self.loginInfo.code
        })
          .then(response => {
            if (response.code == 200) {
              if (response.data.doctorId) {
                localStorage.setItem("doctorId", response.data.doctorId);
                // localStorage.setItem("token", response.data.token);
                sessionStorage.setItem("token", response.data.token);
                localStorage.setItem("doctorImg", response.data.faceUrl);
                localStorage.setItem(
                  "doctorName",
                  response.data.doctorName || response.data.phone
                );
                self.$store.dispatch("GET_DOCTOR", response.data.doctorId);

                self.$store
                  .dispatch("GET_SIG", response.data.doctorId)
                  .then(data => {
                    self.$router.push("home/depending/list");
                  })
                  .catch(() => {
                    self.$message({
                      type: "error",
                      message: "视频链接异常！"
                    });
                  });
              }
            } else {
              self.$message({
                type: "error",
                message: response.data || response.message
              });
            }
          })
          .catch(msg => {
            self.$message({
              type: "error",
              message: "登录失败"
            });
          });
      }
    },
    // 获取验证码
    getCode() {
      var self = this;
      let states = /^(13[0-9]|15[0-3]|15[5-9]|17[0-8]|18[0-9]|19[8-9])\d{8}$/.test(
        self.loginInfo.phone
      );
      if (states) {
        let response = getPhoneCode({
          registPhone: self.loginInfo.phone
        })
          .then(res => {
            if (res.message == "success") {
              this.time--;
              clearInterval(this.timeNum);
              this.timeNum = setInterval(() => {
                this.time--;
              }, 1000);
              self.$message({
                type: "success",
                message: "验证码已发送"
              });
            } else {
              self.$message({
                type: "error",
                message: res.message
              });
            }
          })
          .catch(msg => {
            self.$message({
              type: "error",
              message: "获取验证码失败"
            });
          });
      }
    }
  },
  watch: {
    time() {
      var self = this;
      if (this.time < 0) {
        clearInterval(this.timeNum);
        self.time = 60;
      }
    }
  }
};
</script>

<style scoped>
.body {
  width: 100vw;
  height: 100vh;
  font-family: PingFangSC-Medium, PingFang SC;
  background: url("/static/img/loginBg.png") 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loginBox {
  width: 550px;
  height: 660px;
  background-color: #ffffff;
  box-shadow: 0px 17px 39px 0px rgba(0, 0, 0, 0.14);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.loginTitle {
  font-size: 62px;
  font-weight: 500;
  color: rgba(33, 33, 33, 1);
  line-height: 87px;
  margin-top: 70px;
}
.loginText {
  font-size: 40px;
  font-weight: 500;
  color: rgba(33, 33, 33, 1);
  line-height: 56px;
  margin: 20px 0 50px 0;
}
.inputBox {
  width: 400px;
  /* line-height: 68px; */
  background: rgba(246, 246, 246, 1);
  border-radius: 2px;
  border: 1px solid rgba(224, 224, 224, 1);
}
.codeInput {
  position: relative;
  margin-top: 24px;
}
.getCode {
  font-size: 20px;
  height: 68px;
  font-weight: 400;
  color: rgba(255, 101, 50, 1);
  line-height: 68px;
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 24px;
}
.getCode2{
  color: rgba(117,117,117,1) !important;
}
.loginBtn {
  width: 400px;
  height: 68px;
  text-align: center;
  background: rgba(255, 101, 50, 1);
  border-radius: 2px;
  font-size: 20px;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  line-height: 68px;
  margin-top: 64px;
}
</style>
<style>
.loginBox .el-input__inner {
  height: 68px;
  border: none;
  font-size: 20px;
  background-color: rgba(246, 246, 246, 1);
}
</style>
